<template>
  <div>
    <div class="Swiper">
      <div class="Swiper-content">
        <div class="Swiper-item" v-for="(item, index) in imageUrl" :key="index">
          <img :src="item" alt="" />
        </div>
      </div>
      <div class="swiper-button-prev" @click="prevSlide">
        <i class="el-icon-arrow-left"></i>
      </div>
      <div class="swiper-button-next" @click="nextSlide">
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper } from "@/util/swiper.js";
export default {
  name: "Swiper",
  data() {
    return {
      imageUrl: [
        "https://newstore.vynior.com/shiying1%402x.png",
        "https://newstore.vynior.com/shiying2.png",
        "https://newstore.vynior.com/shiying3.png",
        "https://newstore.vynior.com/shiying5.png",
        "https://newstore.vynior.com/shiying8%402x.png",
        "https://newstore.vynior.com/shiying4.png",
        "https://newstore.vynior.com/shiying7.png",
        "https://newstore.vynior.com/shiying6.png",
      ],
      classList: ["one", "two", "three", "four", "five", "six", "seven", "eit"],
      currentIndex: 0,
    };
  },
  methods: {
    swiper() {
      new Swiper({
        classList: this.classList,
        SwiperContent: ".Swiper-content",
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    },
    prevSlide() {
      this.imageUrl.unshift(this.imageUrl.pop());
    },
    nextSlide() {
      this.imageUrl.push(this.imageUrl.shift());
    },
  },

  mounted() {
    this.swiper();
  },
};
</script>

<style scoped>
.Swiper {
  height: 250px;
  width: 100%;
  position: relative;
  margin: 150px auto;
}

.Swiper-content {
  height: 100%;
  width: 50%;
  position: relative;
  left: 65px;
}

.Swiper-content div {
  position: absolute;
  height: 150px;
  width: 120px;
  margin-top: 50px;
  transition: all 0.6s;
}
.Swiper-content img {
  /* height: 100%;
    width: 100%; */
}
.one {
  z-index: 1;
  transform: scale(0.8);
  left: -60px;
  box-shadow: -3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}
.two {
  z-index: 2;
  transform: scale(0.9);
  left: 75px;
  box-shadow: -3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}

.three {
  z-index: 9;
  transform: scale(1);
  left: 282px;
  box-shadow: -3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}
.four {
  z-index: 2;
  transform: scale(0.9);
  left: 599px;
  box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}

.five {
  z-index: 1;
  transform: scale(0.8);
  left: 835px;
  box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}
.six {
  z-index: 1;
  transform: scale(0.8);
  left: 835px;
  box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}
.seven {
  z-index: 1;
  transform: scale(0.8);
  left: 835px;
  box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}
.eit {
  z-index: 1;
  transform: scale(0.8);
  left: 835px;
  box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  transform: translateY(-50%);
  width: 30px;
  height: 60px;
  background: #333;
  color: #fff;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
  z-index: 999;
}

.swiper-button-prev {
  left: 0;
}

.swiper-button-next {
  right: 0;
}
</style>
